Improve icp configuration instructions#609
Conversation
📝 WalkthroughOverviewThis pull request improves the configuration experience for runtime setup by introducing a reusable code display component and enhancing configuration instructions throughout the application. Key ChangesNew Component: Enhanced Runtime Configuration Instructions
ImpactThe refactoring consolidates copy functionality into a reusable component, reducing code duplication and improving maintainability. The enhanced instructions provide clearer guidance for users configuring different runtime types, particularly for Ballerina-based components. WalkthroughA new reusable CodeBoxWithCopy React component was added to render scrollable, preformatted code with an integrated copy button that writes the code to the clipboard, toggles the button icon to indicate success, and auto-resets after 2 seconds (with cleanup on unmount). The AddRuntimeModal usages in OrgRuntimes.tsx and Runtime.tsx were refactored to use this component and their instructional text was expanded; the BI runtime flow now renders additional code blocks and guidance. Minor template comment formatting was adjusted. Sequence Diagram(s)sequenceDiagram
actor User
participant Modal as AddRuntimeModal
participant CodeBox as CodeBoxWithCopy
participant Clipboard as navigator.clipboard
User->>Modal: Open "Add Runtime" modal
Modal->>CodeBox: Render code block + copy button
User->>CodeBox: Click copy button
CodeBox->>CodeBox: clear existing timeout
CodeBox->>Clipboard: writeText(code)
alt writeText success
Clipboard-->>CodeBox: success
CodeBox->>CodeBox: set copied = true (update UI)
CodeBox->>CodeBox: start timeout (2000ms) to reset copied=false
else writeText failure
Clipboard-->>CodeBox: error
CodeBox-->>Console: log error
end
Note over CodeBox: After 2000ms
CodeBox->>CodeBox: reset copied = false
Note over CodeBox, Modal: On unmount
Modal->>CodeBox: unmount
CodeBox->>CodeBox: clear pending timeout
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
frontend/src/pages/OrgRuntimes.tsx (1)
221-223: Minor copy suggestion.The sentence "Change the project, integration and runtime values as needed. The runtime value must be unique for each runtime you register." reads slightly awkwardly because "runtime you register" re-uses the word "runtime". Consider: "Change the
project,integration, andruntimevalues as needed. Theruntimevalue must be unique per registered runtime." This is purely a wording nit.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/OrgRuntimes.tsx` around lines 221 - 223, Update the copy in the DialogContentText inside the OrgRuntimes component (the block that renders "Add the following configuration...") to replace the awkward sentence with the suggested wording: "Change the `project`, `integration`, and `runtime` values as needed. The `runtime` value must be unique per registered runtime." Ensure you preserve the existing conditional that selects 'Config.toml' vs 'deployment.toml' and keep the <strong> styling around the filenames and the values.frontend/src/components/CodeBoxWithCopy.tsx (2)
38-52: Minor UX/a11y refinements for the code box.
wordBreak: 'break-all'will break code snippets mid-token (e.g., inside secrets/URLs), which is undesirable for copy-friendly code. Consider removing it or usingwordBreak: 'normal'and relying onoverflow: 'auto'for horizontal scrolling.- The
IconButton'saria-labelremains"Copy"even after a copy occurs. Updating it to reflect the copied state (e.g.,aria-label={copied ? 'Copied' : 'Copy'}) improves screen-reader feedback.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/CodeBoxWithCopy.tsx` around lines 38 - 52, The code box currently uses wordBreak: 'break-all' which can split code tokens mid-word and harm copy fidelity; change the Box styling in CodeBoxWithCopy.tsx to remove or replace wordBreak: 'break-all' with a safer value (e.g., 'normal') and rely on overflow: 'auto' for scrolling to preserve token integrity. Also update the IconButton in CodeBoxWithCopy.tsx to expose dynamic accessible text by changing its aria-label to reflect the copied state (use aria-label={copied ? 'Copied' : 'Copy'}) so screen readers receive accurate feedback when handleCopy toggles the copied state.
19-19: Remove defaultReactimport and convert to plain function signature.React 19 TypeScript best practices favor plain function components over
React.FC. Since the defaultReactimport is only used for theReact.FCtype annotation, removing it and using a plain function signature aligns with official React documentation and modern patterns.♻️ Suggested refactor
-import React, { useState } from 'react'; +import { useState } from 'react'; ... -const CodeBoxWithCopy: React.FC<CodeBoxWithCopyProps> = ({ code }) => { +const CodeBoxWithCopy = ({ code }: CodeBoxWithCopyProps) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/CodeBoxWithCopy.tsx` at line 19, Remove the default React import and the React.FC annotation from the CodeBoxWithCopy component: delete the top-level "import React, { useState } from 'react';" and replace it with "import { useState } from 'react';", then change the component declaration from "const CodeBoxWithCopy: React.FC<...> = (props) =>" to a plain function "function CodeBoxWithCopy(props: CodeBoxWithCopyProps) {" (or "const CodeBoxWithCopy = (props: CodeBoxWithCopyProps) => {" if you prefer arrow syntax) and ensure the props type (e.g., CodeBoxWithCopyProps) is used directly; keep all internal usage of useState and JSX unchanged so the component uses the automatic JSX runtime without the default React import.frontend/src/pages/Runtime.tsx (1)
170-181: Consider extracting the BI-specific instruction block into a shared component.The BI-specific block (Ballerina.toml
[build-options]snippet and themain.balimport snippet, along with their surroundingDialogContentTextcopy) is duplicated verbatim betweenAddRuntimeModalhere andAddRuntimeModalinfrontend/src/pages/OrgRuntimes.tsx(lines 225–239). Extracting it into a small reusable component (e.g.,BiSetupInstructions) alongsideCodeBoxWithCopywould keep the two modals in sync if the instructions evolve.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/Runtime.tsx` around lines 170 - 181, Duplicate BI-specific UI in AddRuntimeModal (the isBI conditional block) should be extracted into a small reusable component (e.g., BiSetupInstructions) that returns the two DialogContentText rows and the two CodeBoxWithCopy instances; create BiSetupInstructions (no props needed) and replace the isBI fragment in the AddRuntimeModal in this file and the other AddRuntimeModal copy with a single <BiSetupInstructions /> usage so both modals render the same shared component and remain in sync as instructions change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/CodeBoxWithCopy.tsx`:
- Around line 29-33: The handleCopy function should guard against clipboard
failures and avoid setting state after unmount: wrap
navigator.clipboard.writeText(code) in try/catch and handle rejection (e.g., log
or set an error/fallback UI) and only setCopied(true) on success; store the
timeout ID in a ref (e.g., copyTimeoutRef) instead of using a bare setTimeout,
clear any existing timeout before creating a new one, and add a useEffect
cleanup that clears the timeout on unmount; also update the React import to
include useEffect and useRef.
In `@frontend/src/pages/OrgRuntimes.tsx`:
- Line 158: The commented TOML examples in OrgRuntimes.tsx are inconsistent with
Runtime.tsx: update the commented lines used by the miToml/biToml helpers (the
examples containing "#icp_url" and "#serverUrl") to include a space after the
'#' (e.g., "# icp_url = ...") and normalize spacing around the '=' for serverUrl
to match Runtime.tsx (e.g., "# serverUrl = \"...\""), so both modal snippets
produce identical, consistent copy-paste examples.
---
Nitpick comments:
In `@frontend/src/components/CodeBoxWithCopy.tsx`:
- Around line 38-52: The code box currently uses wordBreak: 'break-all' which
can split code tokens mid-word and harm copy fidelity; change the Box styling in
CodeBoxWithCopy.tsx to remove or replace wordBreak: 'break-all' with a safer
value (e.g., 'normal') and rely on overflow: 'auto' for scrolling to preserve
token integrity. Also update the IconButton in CodeBoxWithCopy.tsx to expose
dynamic accessible text by changing its aria-label to reflect the copied state
(use aria-label={copied ? 'Copied' : 'Copy'}) so screen readers receive accurate
feedback when handleCopy toggles the copied state.
- Line 19: Remove the default React import and the React.FC annotation from the
CodeBoxWithCopy component: delete the top-level "import React, { useState } from
'react';" and replace it with "import { useState } from 'react';", then change
the component declaration from "const CodeBoxWithCopy: React.FC<...> = (props)
=>" to a plain function "function CodeBoxWithCopy(props: CodeBoxWithCopyProps)
{" (or "const CodeBoxWithCopy = (props: CodeBoxWithCopyProps) => {" if you
prefer arrow syntax) and ensure the props type (e.g., CodeBoxWithCopyProps) is
used directly; keep all internal usage of useState and JSX unchanged so the
component uses the automatic JSX runtime without the default React import.
In `@frontend/src/pages/OrgRuntimes.tsx`:
- Around line 221-223: Update the copy in the DialogContentText inside the
OrgRuntimes component (the block that renders "Add the following
configuration...") to replace the awkward sentence with the suggested wording:
"Change the `project`, `integration`, and `runtime` values as needed. The
`runtime` value must be unique per registered runtime." Ensure you preserve the
existing conditional that selects 'Config.toml' vs 'deployment.toml' and keep
the <strong> styling around the filenames and the values.
In `@frontend/src/pages/Runtime.tsx`:
- Around line 170-181: Duplicate BI-specific UI in AddRuntimeModal (the isBI
conditional block) should be extracted into a small reusable component (e.g.,
BiSetupInstructions) that returns the two DialogContentText rows and the two
CodeBoxWithCopy instances; create BiSetupInstructions (no props needed) and
replace the isBI fragment in the AddRuntimeModal in this file and the other
AddRuntimeModal copy with a single <BiSetupInstructions /> usage so both modals
render the same shared component and remain in sync as instructions change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0a398995-eb09-49af-8be5-594d923865ab
📒 Files selected for processing (3)
frontend/src/components/CodeBoxWithCopy.tsxfrontend/src/pages/OrgRuntimes.tsxfrontend/src/pages/Runtime.tsx
There was a problem hiding this comment.
♻️ Duplicate comments (1)
frontend/src/pages/Runtime.tsx (1)
81-91:⚠️ Potential issue | 🟡 MinorTemplate comment style still differs between
Runtime.tsxandOrgRuntimes.tsx.
Runtime.tsxkeeps# icp_url/# serverUrlwith a space after#, whileOrgRuntimes.tsx(lines 158, 168) now uses#icp_url/#serverUrlwith no space. Both render the same modal-style instructions, so aligning the helper output would keep the snippets users copy from each page identical.Proposed alignment (pick one style)
-# icp_url = "https://<hostname>:9445"`; +#icp_url = "https://<hostname>:9445"`;-# serverUrl="https://<hostname>:9445"`; +#serverUrl="https://<hostname>:9445"`;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/Runtime.tsx` around lines 81 - 91, The comment points out inconsistent template comment spacing between Runtime.tsx and OrgRuntimes.tsx; update the biToml function in Runtime.tsx so its commented keys match the style used in OrgRuntimes.tsx (or vice versa)—for example, change the "# serverUrl" and "# icp_url" lines in biToml to use the exact same "#serverUrl" and "#icp_url" token formatting as the other file so both helper outputs produce identical modal snippets; modify the string literals inside biToml (function biToml) accordingly to match the chosen style.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@frontend/src/pages/Runtime.tsx`:
- Around line 81-91: The comment points out inconsistent template comment
spacing between Runtime.tsx and OrgRuntimes.tsx; update the biToml function in
Runtime.tsx so its commented keys match the style used in OrgRuntimes.tsx (or
vice versa)—for example, change the "# serverUrl" and "# icp_url" lines in
biToml to use the exact same "#serverUrl" and "#icp_url" token formatting as the
other file so both helper outputs produce identical modal snippets; modify the
string literals inside biToml (function biToml) accordingly to match the chosen
style.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4415724e-a66f-4c67-aac8-51985340a837
📒 Files selected for processing (3)
frontend/src/components/CodeBoxWithCopy.tsxfrontend/src/pages/OrgRuntimes.tsxfrontend/src/pages/Runtime.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/CodeBoxWithCopy.tsx
2 participants
Purpose